<template>
    <div :style="{'--themescolor': themes.color}">
        <div :class="{'det-checked det-click':type==0}" @click="clickShow" style="margin-top: 0px;" :style="{borderTop:`${type==0?1:0}px solid #f8f8f8`}">
            <div class="checked-tit" v-if="type==0">送至</div>
            <div :class="[type==0?'checked-con':'font-14 line-clamp1 v-middle']">
				<span class="iconfont iconlocation mr-03p" style="font-size: 14px;"></span>
                <template v-if="addrData&&addrData.addrName">
                    <span :class="{'check-sku':type==0}">{{addrData.addrName}}</span>
                </template>
                <!-- <span class="check-sku" v-else>北京市朝阳区</span> -->
            </div>
            <div class="more" v-if="type==0">...</div>
        </div>

        <div class="popup-hide" :class="{ show: show }" @click.stop>
            <div class="popup-box">
                <div class="popup-tit">
                    <em class="tit">配送至</em>
                    <i class="close close-pop" @click="closeAll"></i>
                </div>
                <div class="popup-con promotion-msg">
                    <div class="font-14" v-for="(item,index) in addressList" :key='index' @click="choiceAdd(item.addrId, item)">
                        <div :class="{ 'font-weight': item.commonAddr=='1'}" class="mb-2">
                            <img class="v-middle" style="width: 14px;" src="../../../assets/images/choose-area.png" alt="" v-if="item.commonAddr=='1'">
							<span class="iconfont iconlocation v-middle" style="font-size: 14px;width: 14px;" v-else></span>
                            {{item.province? item.province: ''}}{{item.city? item.city: ''}}{{item.area? item.area: ''}}{{item.town? item.town: ''}}
                            {{item.subAdds? item.subAdds: ''}}
                        </div>
                        
                    </div>
                </div>
                <button class="popup-btn" @click="goChoose">选择其它地址</button>
            </div>
        </div>
        <address-select v-model="addressShow" title="地址" mode="id" @confirm="onAddress"/>
    </div>
</template>
<script>
import addressSelect from "components/addressSelect/addressSelect"
import { address } from "api/addressManage"
import {mapState} from 'vuex';
export default {
    components: {
        addressSelect
    },
    props: {
        type: {//显示的样式，0：显示‘送至’，‘...’，1：不显示‘送至’，‘...’
            type: [Number,String],
            default: 0
        },
        addrData: {//地址数据
            type: [Object,String],
            default: () => {
                return {
                    // type:0,//0:选择用户已有的收货地址(后台读取addrId数据)，1：自定义选择区域(后台读取addrList数据)
                    // addrId:'',
                    // addrList:[],
                    // addrName:''
                };
            }
        }
        
    },
    data() {
        return {
            show: false,
            addressShow: false,
            addressList:[]
        };
    },
    computed: {
        ...mapState(['themes']),
    },
    watch: {
        // addrData: {
        //     handler(newValue, oldValue) {
        //     },
        //     deep: true,
        //     immediate: true
        // },
    },
    mounted() {
    },
    methods: {
        //设置默认地址
        async getAddress(type=0,addrId) {
          try {
            let res = await address({type:type,addrId: addrId})
            if (res.status != 1) {
              this.$toast(res.msg)
              return
            }
            this.addressList = res.result

            // 如果返回的数据为空，则直接选择地址
            if(res.result.length == 0) {
                this.goChoose()
            }
        
          } catch (error) {
          }
        },
        
        clickShow() {
            this.show = true;
            this.getAddress(this.addrData.type,this.addrData.addrId)
        },
        closeAll() {
            this.show = false;
        },
        choiceAdd(addrId, item){
            this.show = false;
            this.$emit('choiceAdd',addrId, item)
        },
        //去选择地址
        goChoose() {
            this.show = false;
            this.addressShow = true
        },
        onAddress(event) {
            let addrData = {
                type:1,//0:选择用户已有的收货地址(后台读取addrId数据)，1：自定义选择区域(后台读取addrList数据)
                addrId:'',
                addrList:[],
                addrName:''
            }
            addrData.addrList = event.keyId
            addrData.addrName = event.addressStr
            this.$emit('onAddress',addrData)
        },
    }
};
</script>
<style src="@/assets/css/detail.css"></style>
<style src="@/assets/css/popup.css"></style>
<style lang="stylus" scoped>
    

</style>
